/**
 * Copyright 2023 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '~/styles/variables';

.emojisplosion {
  position: absolute;
  bottom: calc(100% + 40px);
  width: 0;
  height: 0;
  left: 50%;
  z-index: -2;
  opacity: 0;
  font-family: 'Noto Color Emoji';

  div {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 0;
    height: 0;
  }

  &.play {
    opacity: 1;
    transition: opacity 0.125s;

    $total: 15;
    $time: 2;

    @for $i from 1 through $total {
      div:nth-child(#{$i}) {
        font-size: calc(25 + random(25)) + px;
        animation: anim#{$i} $time + s linear;
        animation-delay: (0.05 * $i * calc($time/$total)) + s;
        animation-fill-mode: forwards;
      }
      @keyframes anim#{$i} {
        $x: 0;
        $y: 0;
        $vx: random(30) * (random() * 2 - 1);
        $vy: -(20 + random(40));
        $gravity: 5;

        @for $i from 1 through 50 {
          #{$i * 2%} {
            $x: $x + $vx;
            $y: $y + $vy;
            $vy: $vy + $gravity;
            transform: translate3d($x + px, $y + px, 1px) rotate($x + deg);
            opacity: 1;
          }
        }
      }
    }
  }
}
